<template>
  <main class="main-page">
    <!-- 全面图 -->
    <div class="main-brand">
      <div class="main-brand-content">
        <h3>Daes Huang</h3>
        <div class="main-brand-cover">
          <a class="main-brand-btn btnColor" href="#indexCard"
            ><i class="el-icon-milk-tea"></i> 开始阅读</a
          >
          <a class="main-brand-btn btnColor" href="#just"
            ><i class="el-icon-edit"></i> 点击了解</a
          >
        </div>
        <div class="cover-link">
          <el-row :gutter="20">
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <a href="https://space.bilibili.com/70433425/favlist"
                  ><i
                    class="iconfont icon-wifi"
                    style="font-size:26px; color:#fff;"
                  ></i
                ></a>
              </div>
            </el-col>
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <a href="https://gitee.com/daes/vue_shop"
                  ><i
                    class="iconfont icon-GitHub"
                    style="font-size:26px; color:#fff;"
                  ></i
                ></a></div
            ></el-col>
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <a href="https://www.zhihu.com/people/shan-seng-26-89/posts"
                  ><i
                    class="iconfont icon-zhihu"
                    style="font-size:26px; color:#fff;"
                  ></i
                ></a></div
            ></el-col>
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <a
                  href="http://wpa.qq.com/msgrd?V=3&uin=810203055&Site=www.yudouyudou.com&Menu=yes"
                  ><i
                    class="iconfont icon-QQ"
                    style="font-size:26px; color:#fff;"
                  ></i
                ></a></div
            ></el-col>
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <a
                  href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=t9PW0sSFh4WH98bGmdTY2g"
                  ><i
                    class="iconfont icon-youxiang"
                    style="font-size:26px; color:#fff;"
                  ></i
                ></a></div
            ></el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 开始阅读锚点 -->
    <a name="indexCard"></a>
    <!-- 主要内容 -->
    <div class="main-container">
      <div class="center">
        <el-card class="main-container-card">
          <!-- 我的梦想 -->
          <div class="main-container-dream">
            <h3><i class="iconfont icon-deng"></i> 我的梦想</h3>
            <p>到三十岁的年纪，城里面有一套房，一个成功的工作室</p>
            <p>带着妻子环游世界，生活过的很充实！</p>
            <p>回到乡镇和自己兄弟住一个院子</p>
            <p>唯有坚持梦想，才能演绎成功的人生。</p>
            <p>让我们共同为梦而努力，为梦而奋斗，为梦创造奇迹。</p>
          </div>

          <!-- 喜爱的音乐 -->
          <div class="main-container-music">
            <h3><i class="iconfont icon-yinle"></i> BGM</h3>
            <div class="music_content mtop40">
              <!-- 音乐播放器-->
              <Aplayer
                :music="musicActive"
                :list="musicData"
                :float="true"
                class="music_song"
                v-if="flag"
              />
            </div>
          </div>

          <!-- 推荐文章 -->
          <div class="main-container-article">
            <h3><i class="iconfont icon-dianzan"></i> 推荐文章</h3>
            <div
              class="center main-article-content mtop40 page_all"
              v-for="(item, i) in moreData.slice(0, 1)"
              :key="i"
            >
              <h5>{{ item.title }}</h5>
              <p>{{ item.des }}</p>
              <nuxt-link :to="/posts/ + item.id" class="more">
                <i class="iconfont icon-yanjing"></i>
                <span>阅读更多</span>
              </nuxt-link>
            </div>
            <!-- 推荐文章2-3 -->
            <div class="center page_card">
              <div
                class="main-article-item"
                v-for="(item, i) in moreData.slice(1, 3)"
                :key="i"
              >
                <div
                  :class="{
                    page_all: true,
                    page_active: i == 1,
                    page_actives: i == 0
                  }"
                >
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.des }}</p>
                  <nuxt-link :to="/posts/ + item.id" class="more">
                    <i class="iconfont icon-yanjing"></i>
                    <span>阅读更多</span>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 了解锚点 -->
    <a name="just" class="main-words"></a>
    <!-- 关于我  -->
    <section class="main-just">
      <!-- 关于我内容 -->
      <section class="main-just-content center">
        <h3>Just about me</h3>
        <section class="main-just-item">
          <section class="main-just-item-left">
            <p>
              Daes是笔名也是网名，作为98年生的人内心坚信自己是90后，身上有90后诸多特点：陶醉于自我，愤世嫉俗，算得上妥妥的垮掉的一代。
            </p>
            <p>
              在学历贬值的年代里，初中高中没有好好学习，只知道上网打游戏，不务正业，那个时候连以后的工作都想好了，立志做个IT从业者，具体做什么却不知道。幸得高考前阵努力一把，勉强考上本科学校，混得本科文凭，好在学校教过一些技能譬如html、java、js、c/c++、嵌入式、计算机网络，学得广而不专，多而不精，只能算是基础理论，马上面临毕业，冲刺一把找一个好工作。
            </p>
            <p>
              在大三有一门课程对我来说特别感兴趣也是目前为止让我有动力——Web前端。让我在写网页中获取成就感，感觉每天都过得很充实，独立学习，经常遇到难题的时候，我会在百度、简书，以及查询文档解决大部分问题。我看一些web前端学习视频在<a
                href="https://www.bilibili.com/"
                style="color: black"
                >哔哩哔哩网站</a
              >，前端更新很快，学习前端教程视频就会有一些差别，导致按这步骤走就会出错，但视频评论区里会有很多一起学习的小伙伴以及大佬在里面分享解决问题的方法和一些新的学习资源，博主也收藏了很多自我觉得很好的前端资源视频教程，可以点击下方联系我分享给你。
            </p>
            <p>
              Daes的个人博客开通于2020年5月，其实在2019年Daes也做过<a
                href="http://hxs0623.cn3v.net/"
                style="color: black;"
                target="_blank"
                >个人博客</a
              >
              ，那时对于建站一窍不通，很多问题摸索几天都解决不了，在现在看来是十分可笑的。写那个博客全是用的html、css静态网页，现在看来太过于单调。这次重拾博客，用Vue框架搭建，域名也用本人笔名，博客主要记录自己的心情、笔记，搜集好玩的内容。
            </p>
            <div class="main-j-i-l-about">
              <h5>About my blog</h5>
              <div class="main-j-l-a-link">
                <p>
                  域 名：www.jszesi.com 创建于2019年06月26日
                  <a
                    href="https://www.aliyun.com/"
                    target="_blank"
                    rel="nofollow"
                    >注册域名</a
                  >
                </p>
                <p>服务器：阿里云</p>
                <p>
                  框 架：Vue
                  <a
                    href="https://cn.vuejs.org/"
                    target="_blank"
                    class="blog_link"
                    rel="nofollow"
                    >查看</a
                  >
                </p>
              </div>
              <div class="main-j-l-a-img">
                <img src="//s1.ax1x.com/2020/07/08/UZQ5k9.png" alt="" />
              </div>
            </div>
          </section>
          <section class="main-just-item-right">
            <div class="main-just-mobile">
              <p>网名：<span>Daes</span> | 泽斯</p>
              <p>籍贯：广东省 — 揭阳市</p>
              <p>年龄：22</p>
              <p>技能掌握：Html、Vue、Node</p>
              <p>喜欢的电影：《阿甘正传》</p>
              <p>喜欢的运动：篮球、乒乓、羽毛球</p>
              <p>喜欢的音乐：《光辉岁月》《水手》</p>
            </div>
            <div class="main-just-dou">
              <div class="main-j-c-i-dong">
                <img src="//s1.ax1x.com/2020/07/08/UZQhTJ.png" alt="" />
              </div>
            </div>
          </section>
        </section>
      </section>
    </section>
    <!-- 版权 -->
    <Footer></Footer>
  </main>
</template>

<script>
import Aplayer from 'vue-aplayer'
import Footer from '@/components/Footer.vue'

export default {
  // 请求数据
  async asyncData({ $axios }) {
    const { data: res } = await $axios.get(
      'http://47.107.156.169:3000/api/v1/more',
      {
        params: {
          pagenum: 0,
          pagesize: 3
        }
      }
    )
    return { moreData: res.data.mores }
  },
  data() {
    return {
      // 播放器默认列表
      musicActive: {},
      // 播放器数据数组
      musicData: [],
      flag: false
    }
  },
  methods: {
    // 获取音乐列表
    async getMusic() {
      var { data: res } = await this.$axios.get(
        'http://47.107.156.169:3000/api/v1/music'
      )
      if (res.meta.status !== 200) return alert('获取失败')
      this.musicData = res.data
      this.musicActive = this.musicData[0]
      // 当没有数据的时候 让插件不显示
      this.flag = true
    },
    musicClick(row) {
      this.musicActive = row
    }
  },
  created() {
    this.getMusic()
  },
  components: {
    Footer,
    Aplayer
  }
}
</script>

<style lang="scss" scoped>
.main-page {
  width: 100%;
  height: 100%;
  .center {
    margin: 0 auto;
    width: 1200px;
  }
  /* 全面图 */
  .main-brand {
    position: relative;
    top: 0;
    display: flex;
    height: 100%;
    width: 100%;
    min-width: 1200px;
    background: url('//s1.ax1x.com/2020/05/24/YzyXkt.jpg') top;
    background-size: cover;
    z-index: 10;
    .main-brand-content {
      position: absolute;
      top: 60%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      h3 {
        color: #fff;
        font-weight: 400;
        font-size: 40px;
        text-align: center;
        margin-bottom: 150px;
      }
      .main-brand-cover {
        width: 350px;
        display: flex;
        justify-content: space-between;
        .main-brand-btn {
          display: inline-block;
          background-color: rgba(255, 255, 255, 0.719);
          color: #409eff;
          font-size: 12px;
          padding: 12px 34px;
          border-radius: 25px;
        }
        .btnColor:hover {
          background-image: linear-gradient(to right, #0f6fff, #ea6ffe);
          color: #fff;
        }
      }
      .cover-link {
        margin: 200px 0 0 40px;
        text-align: center;
      }
    }
  }

  /* 主要内容 */
  .main-container {
    padding: 40px 0;
    background-color: #f6f6f6;
    min-height: 80%;
    .main-container-card {
      border-radius: 5px;
      position: relative;
      z-index: 3;
      h3 {
        margin-bottom: 40px;
        font-size: 24px;
        text-align: center;
        font-family: 'KaiTi';
        i {
          font-size: 24px;
        }
      }
      .mtop40 {
        margin-top: 40px;
      }
      .main-container-dream {
        margin: 20px 0;
        text-align: center;
        font-family: 'KaiTi';
        p {
          line-height: 40px;
          font-size: 15px;
          color: #666;
        }
      }
      .main-container-music {
        padding-top: 15px;
        .music_content {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          .music_song {
            width: 50%;
          }
        }
      }
      .main-container-article {
        margin-top: 40px;
        margin-bottom: 20px;
        .page_all {
          height: 300px;
          background-size: cover;
          background-position: center;
          border-radius: 15px;
          color: #fff;
          text-align: center;
          transition: all 0.2;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          h5 {
            padding-top: 40px;
            line-height: 40px;
            font-size: 18px;
            font-weight: 500;
          }
          p {
            margin-top: 60px;
            line-height: 20px;
            font-size: 14px;
          }
        }
        .page_card {
          margin-top: 32px;
          width: 100%;
          overflow: hidden;
          padding: 0 132px;
          .main-article-item {
            width: 37%;
            float: left;
          }
          .main-article-item:nth-child(2) {
            margin-left: 36px;
          }
        }
        .main-article-content {
          max-width: 77%;
          background-image: url('//s1.ax1x.com/2020/07/08/UZQYSP.jpg');
        }
        .page_actives {
          background-image: url('//s1.ax1x.com/2020/07/08/UZQDFs.jpg');
          a {
            background-image: linear-gradient(to left, #c944f7, #ed4dbb);
          }
        }
        .page_active {
          background-image: url('//s1.ax1x.com/2020/05/24/Yzr3AP.jpg');
          a {
            background-image: linear-gradient(to left, #1acbfc, #1d6ef1);
          }
        }
        .more {
          position: relative;
          margin-top: 40px;
          display: inline-block;
          height: 40px;
          line-height: 40px;
          width: 100px;
          background-image: linear-gradient(to left, #ff2d66, #ff5940);
          border-radius: 25px;
          font-size: 12px;
          transition: all 0.2s;
          i {
            position: absolute;
            top: 2px;
            left: 14px;
          }
          span {
            padding-left: 20px;
          }
        }
        .more:hover {
          transform: scale(1.1);
          font-size: 13px;
        }
      }
    }
  }

  /* 关于我 */
  .main-just {
    padding-bottom: 40px;
    min-width: 1200px;
    background-color: #f6f6f6;
    font-size: 14px;
    .main-just-content {
      position: relative;
      padding-top: 40px;
      padding-bottom: 20px;
      background: #fff;
      z-index: 4;
      box-shadow: 0 0 20px #d3d3d3;
      h3 {
        text-align: center;
        font-size: 38px;
        font-weight: 450;
      }
      .main-just-item {
        margin-top: 40px;
        overflow: hidden;
        p {
          line-height: 26px;
        }
        .main-just-item-left {
          float: left;
          margin-left: 20px;
          width: 800px;
          text-indent: 30px;
          .main-j-i-l-about {
            margin-top: 40px;
            height: 280px;
            h5 {
              line-height: 60px;
              text-align: center;
              font-size: 18px;
            }
            p {
              line-height: 80px;
            }
            a {
              color: #8bbf5d;
            }
            .main-j-l-a-link {
              float: left;
            }
            .main-j-l-a-img {
              margin-top: 30px;
              text-align: center;
              img {
                width: 240px;
              }
            }
          }
        }
        .main-just-item-right {
          width: 300px;
          float: right;
          margin-left: -40px;
          padding-left: 40px;
          border-left: 1px solid #c9c9c9;
          p {
            line-height: 60px;
          }
          .main-j-c-i-dong {
            margin-top: 70px;
            width: 230px;
            img {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
